<template>
  <div class="contains">
    <el-popover placement="bottom" width="220" trigger="click">
      <!-- <i slot="reference" class="el-icon-s-marketing"></i> -->
      <svg-icon
        slot="reference"
        icon-class="tongjifenxi"
        class-name="tongjifenxi"
      ></svg-icon>
      <div>
        <svg-icon
          icon-class="callphone"
          class-name="callphone"
          style="color: var(--color-primary);"
        ></svg-icon>
        通话费用：<span class="is_num">556.68</span>
      </div>
      <el-divider></el-divider>
      <div>快递100余量： <span class="is_num">68073条</span></div>
      <el-divider></el-divider>
      <div>
        易联通电话余额：
        <YLTMsg>
          <el-link href="https://saas.yyunhu.com/#/login" target="_blank">
            <span class="is_num">991.16元</span>
          </el-link>
        </YLTMsg>
      </div>
      <el-divider></el-divider>
      <div>
        诚立业短信条数：
        <CLYMsg>
          <el-link href="https://vip.clysz.cn/login" target="_blank">
            <span class="is_num">
              14031条
            </span>
          </el-link>
        </CLYMsg>
      </div>
    </el-popover>
  </div>
</template>

<script>
import YLTMsg from "./YLTMsg.vue";
import CLYMsg from "./CLYMsg.vue";
export default {
  data() {
    return {};
  },
  components: { YLTMsg, CLYMsg }
};
</script>

<style lang="scss" scoped>
$themeColor: var(--color-primary);
.contains {
  display: inline-block;
  vertical-align: text-bottom;
  padding: 0 8px;

  .tongjifenxi {
    font-size: 18px;
    vertical-align: middle;
    cursor: pointer;
  }
}
.el-divider {
  margin: 5px 0;
}
.is_num {
  color: $themeColor;
}
</style>
